<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="tree-table-container">
    <div class="header-tab">
        <lv-radio-group [(ngModel)]="pathView" [lvGroupName]="'path'" (ngModelChange)="tabChange()">
            <lv-group lvGutter='14px'>
                <lv-radio [lvViewType]="'custom'" [lvValue]="totalView">
                    <div>
                        {{'protection_sla_optional_tooltip_step_label' | i18n}}
                        <span class="num-tag" [ngClass]="{'tag-light': pathView === totalView}">{{total}}</span>
                    </div>
                </lv-radio>
                <div class="dash-line"></div>
                <lv-radio [lvViewType]="'custom'" [lvValue]="selectedView">
                    <div>
                        {{'common_selected_simple_label' | i18n}}
                        <span class="num-tag"
                            [ngClass]="{'tag-light': pathView === selectedView}">{{selectedTotal}}</span>
                    </div>
                </lv-radio>
            </lv-group>
        </lv-radio-group>
    </div>
    <ng-container *ngIf="pathView === totalView">
        <lv-group lvGutter='14px' [lvColumns]='["auto", "270px"]' class="search-path-container">
            <div class="bread-crumb-path">
                <lv-breadcrumb [lvItems]="filePathItems" class="breadcrumb"></lv-breadcrumb>
            </div>
            <div class="search-name">
                <lv-search (lvSearch)="searchName($event)"
                    lvPlaceHolder="{{'explore_dws_restore_search_under_label' | i18n:[selectionTree[0]?selectionTree[0].label:copy?.resource_name]}}"
                    [(ngModel)]="searcKey"></lv-search>
            </div>
        </lv-group>
    </ng-container>
    <ng-container *ngIf="pathView === totalView; else elseTableTemplate">
        <lv-group class="tree-table" [lvColumns]='["270px", "auto"]'>
            <div class="tree-container">
                <lv-tree #tree lvCompareWith="rootPath" lvSelectionAssociate="false" [lvData]="treeData"
                    (lvExpandedChange)="expandedChange($event)" lvSelectionMode="single" [(lvSelection)]="selectionTree"
                    (lvCheck)="pathNodeCheck($event)" [lvBeforeSelected]="beforeSelected" lvShowContentIcon
                    [lvNodeTemplate]='nodeTpl' style="width: auto;"></lv-tree>
                <ng-template #nodeTpl let-item>
                    <div style="width: 160px;" lv-overflow>
                        <span *ngIf="!item.isMoreBtn">
                            <i lv-icon="{{item.contentToggleIcon}}"></i>
                            {{item.label}}
                        </span>
                    </div>
                    <span class="aui-link" *ngIf="item.isMoreBtn"
                        (click)="clickMoreFile($event, item)">{{item.label}}</span>
                </ng-template>
            </div>
            <div class="table-container">
                <lv-group lvDirection='vertical'>
                    <div style="height: 570px;">
                        <lv-loading [lvLoading]="tableLoading">
                            <lv-pro-table #dataTable [config]="tableConfig" [data]="tableData"></lv-pro-table>
                        </lv-loading>
                    </div>
                    <div class="page-total">{{'common_page_total_label' | i18n:[total]}}</div>
                </lv-group>
            </div>
        </lv-group>
    </ng-container>
    <ng-template #elseTableTemplate>
        <div class="table-container">
            <lv-pro-table #dataSelectTable [config]="selectTableConfig" [data]="selectTableData"></lv-pro-table>
        </div>
    </ng-template>
</div>

<ng-template #fileTpl let-item>
    <span lv-overflow>
        <i lv-icon="{{ item.contentToggleIcon }}" [lvColorState]="true"></i>
        {{ item.name }}
    </span>
</ng-template>

<ng-template #sizeTpl let-item>
    <!-- 文件夹或者链接文件不展示大小 -->
    <span lv-overflow *ngIf="!_includes([restoreFileType.Directory, restoreFileType.Link], item.type)">
        {{item.size | capacityCalculateLabel: '1.1-3':unitconst.BYTE:true}}
    </span>
</ng-template>

<ng-template #optTpl let-item>
    <lv-group class="opt-row">
        <span lv-overflow>
            {{item.rootPath}}
        </span>
        <i lv-icon="lv-icon-close" [lvColorState]="true" (click)="deleteNode(item)"></i>
    </lv-group>
</ng-template>